<template>
    <div id="commonhead">
      <div class="headlogo">
          <div class="logo wrap">
            <img src="../../static/img/guoheLogo.png" alt="" class="ct">
          </div>
          <div class="netname" style="overflow: hidden;height: 65px;">“信用中国”系列网站监测管理系统</div>
      </div>
      <div class="nav clearfix">
        <ul class="wrap">
          <li v-for="item in navli" :key="item.id" @click="selectMapNav(item.url)" :class="selectNow === item.url ? 'active':''">{{item.name}}</li>
        </ul>
      </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      navli: [{name: '首页', url: 'index'},
        {name: '工作动态', url: 'work'},
        {name: '省网监测', url: 'promon'},
        {name: '市网监测', url: 'citymon'},
        {name: '专项监测', url: 'specilmon'},
        {name: '监测报告', url: 'monreport'}
      ],
      selectNow: ''
    }
  },
  beforeCreate () {

  },
  mounted () {
    this.selectNow = this.$route.name
  },
  methods: {
    selectMapNav (url) {
      this.selectNow = url
      sessionStorage.setItem('selectNow', url)
      switch (this.selectNow) {
        case 'index': this.$router.push('index')
          break
        case 'work': this.$router.push('work')
          break
        case 'promon': this.$router.push('promon')
          break
        case 'citymon': this.$router.push('citymon')
          break
        case 'specilmon': this.$router.push('specilmon')
          break
        case 'monreport': this.$router.push('monreport')
          break
      }
    }
  },
  watch: {
    $route: function (newval, oldval) {
      this.selectNow = newval.name
    }
  }
}
</script>
<style lang="less" scoped>
  #commonhead{
    .headlogo{
      height: 230px;
      background: url("../../static/img/headbg.png") no-repeat center;
    }
    .logo{
      height: 100px;line-height: 100px;
      position: relative;
    }
    .logo>img{
    }
    .logo>span{
      padding-left: 75px;
      font-size: 40px;
      color: #dd2826;
    }
    .netname{
      text-align: center;
      font-size: 50px;
      color: black;
      margin-top: -26px;
    }
    .nav{
      height: 65px;
      background-color: #e22323;
      li{
        float: left;
        height: 65px;
        line-height: 65px;
        text-align: center;
        color: white;
        font-size: 18px;
        width: 16.66%;
        cursor: pointer;
        position: relative;
      }
      .active:after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100px;
        height: 0px;
        border-bottom: 6px solid #fb7d7d;
      }
    }
  }
</style>
